<template>
  <div>
    <Cars/>
    <Map/>

    <Navbar/>
    
    <div id="children-view" :class="{open: show}">
      <router-view/>
    </div>
  </div>
</template>

<script>
import Map from '../amap/index'
import Cars from '../cars/index'
import Navbar from '@c/navbar'

export default {
  name: 'Index',
  components: { Map, Cars , Navbar},
  data() {
   return {
     // show: false
   }   
  },
  computed: {
    show() {
      const router = this.$route;
      //console.log(router)
      return router.name === "Index" ? false: true;
    }
  },
  watch: {
    /* "$route": {
      handler(newValue) {
        const routerName = newValue.name;
        this.show = routeName === "Index" ? false : true;
        console.log(routerName)
      }
    } */
  },
};
</script>

<style lang="scss">
#children-view{
  position: fixed;
  top: 0;
  bottom: 0;
  right: -600px;
  width: 410px;
  z-index: 101;
  background-color: #34393f;
  -webkit-transition: all .3s ease 0s ;
  transition: all .3s ease 0s ;
  &.open{
    right: 0;
  }
}

</style>
